<template>
	<view class="personalDataDiv">
		<!-- 个人资料修改 -->
		<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
			<u-form-item label="昵称" prop="nickName" borderBottom ref="item1">
				<u--input v-model="userInfo.nickName" border="none" placeholder="请输入昵称"></u--input>
			</u-form-item>
			<u-form-item label="性别" prop="gender" borderBottom @click="showSex = true" ref="item1">
				<u--input v-model="userInfo.gender" disabled disabledColor="#ffffff" placeholder="请选择性别"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="头像" borderBottom ref="item1">
				<u-avatar :src="userInfo.profilePhoto" @click="shangchuan"></u-avatar>
			</u-form-item>
		</u--form>
		<view class="submitDiv">
			<u-button type="primary" @click="submit">提交</u-button>
		</view>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		deletePhoto,
		personalInformationUpdate
	} from '@/api/userCenter.js'
	export default {
		data() {
			return {
				// BASE_URL: 'http://192.168.10.243:8081', //刘
				BASE_URL:'http://192.168.10.122:8081',//张
				showSex: false,
				userInfo: {
					nickName: '',
					gender: '',
					profilePhoto: ''
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'nickName': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'gender': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					},
					'profilePhoto': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		methods: {
			shangchuan() {
				if (this.userInfo.profilePhoto) {
					let filename = this.userInfo.profilePhoto.split('/').pop(); // 提取文件名部分
					deletePhoto({
						filename
					}).then(response => {
						this.userInfo.profilePhoto = ''
					})
				} else {
					uni.chooseImage({
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							uni.uploadFile({
								url: `${this.BASE_URL}/commonUtil/addPhoto`, //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'file',
								formData: {
									'Content-Type': 'multipart/form-data',
									'Authorization': wx.getStorageSync('userInfo').token,
									'satoken': wx.getStorageSync('userInfo').token
								},
								success: (res) => {
									let resData = JSON.parse(res.data)
									if (resData.code == 200) {
										this.userInfo.profilePhoto = resData.data

									}
								}
							});
						}
					});
				}

			},
			// 点击确认
			submit() {
				this.$refs.uForm.validate().then(res => {
					personalInformationUpdate(this.userInfo).then(res => {
						if (res.code == 200) {
							wx.showToast({
								title: res.msg,
								icon: 'success',
								duration: 1000
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
					})
				}).catch(errors => {
					uni.$u.toast('请全部输入')
				})
			},
			sexSelect(e) {
				this.userInfo.gender = e.name
				this.$refs.uForm.validateField('gender')
			},
		}
	}
</script>

<style lang="scss">
	.personalDataDiv {
		background-color: #ffffff;
		padding: 0 20rpx;
		position: relative;
		width: 100%;
		height: calc(100vh - 20rpx);

		.submitDiv {
			width: 80%;
			position: absolute;
			bottom: 40rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}
	}

	page {
		background-color: #f5f5f5;
		padding-top: 20rpx;
	}
</style>